import React from "react";
import style from "./style.module.css";
import { Steps, Button, message } from "antd";
import GoodsInfo from "@c/AddGoodsCom/goodsInfo";
import GoodsDeatail from "@c/AddGoodsCom/goodsDetail";
import GoodsGuige from "@c/AddGoodsCom/goodsGuige";

const { Step } = Steps;

function AddGoods() {
  const [current, setCurrent] = React.useState(0);
  // 获取商品信息(第一步骤)

  const getShopInfo = (value) => {
    console.log(value);
  };

  const steps = [
    {
      title: "商品信息",
      content: <GoodsInfo getShopInfo={getShopInfo} />,
    },
    {
      title: "商品详情",
      content: <GoodsDeatail />,
    },
    {
      title: "规格设置",
      content: <GoodsGuige />,
    },
  ];

  // 下一步
  const next = () => {
    setCurrent(current + 1);
  };

  // 上一步
  const prev = () => {
    setCurrent(current - 1);
  };

  return (
    <div className={style.addBox}>
      <div className={style.addBox_step}>
        <Steps current={current}>
          {steps.map((item) => (
            <Step key={item.title} title={item.title} />
          ))}
        </Steps>
      </div>
      <div className={style.steps_content}>{steps[current].content}</div>
      <div className={style.steps_action}>
        {current < steps.length - 1 && (
          <Button type="primary" onClick={() => next()}>
            下一步
          </Button>
        )}
        {current === steps.length - 1 && (
          <Button
            type="primary"
            onClick={() => message.success("Processing complete!")}
          >
            完成
          </Button>
        )}
        {current > 0 && (
          <Button style={{ margin: "0 8px" }} onClick={() => prev()}>
            上一步
          </Button>
        )}
      </div>
    </div>
  );
}

export default AddGoods;
